<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ登录</title>
    <!-- 引入网页图标 -->
    <link rel="shortcut icon" href="images/20201127092629_f7kg4fnVIB.ico" type="image/x-icon">
    <!-- 引入本项目样式 -->
    <link rel="stylesheet" href="css/qq-login.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wrap">
    <div class="QQ-login">
        <div class="tabs">
            <h3>密码登录</h3>
            <br>
            <p>推荐使用<a href="#">快捷登录</a>，防止盗号</p>
        </div>
        <form action="/login" method="post">
            <div class="item">
                <input v-model="qqid" name="qqid" type="text" placeholder="支持QQ号/邮箱/手机号登录" autofocus>
            </div>
            <div class="item">
                <input v-model="pwd" name="pwd" type="password" placeholder="请输入密码">
            </div>
            <div class="item">
                <input type="button" @click="login" value="登录">
            </div>
        </form>
        <div class="other">
            <a href="#"><span>找回密码</span></a><i>|</i>
            <a href="#"><span>注册账号</span></a><i>|</i>
            <a href="#"><span>反馈意见</span></a>
        </div>
    </div>
</div>

<!--1\用vue实现两个数据库双向绑定
    2\为按钮绑定一个鼠标单击事件
    3\点按钮的时候做一个非空验证！！或格式验证！
    4\发送异步请求
-->


<!--引入vue的js文件-->
<script src="js/vue.2.7.14.js"></script>

<!-- 引入组件库 -->
<script src="js/index.js"></script>

<!--引入axios-->
<script src="js/axios.min.js"></script>
<script>

    let vm = new Vue({
        el:'.QQ-login',
        data:{
            qqid:'',
            pwd:'',
            mconfig:{
                confirmButtonText: '确定',
                showClose: false,
                showCancelButton: true,
                type:'error'
            }
        },
        methods:{
            login() {
                if (this.qqid && this.pwd) {

                    // 加载特效 elementui自带的
                    // lock true锁屏，false就不锁屏
                    // text 显示的文本
                    // spinner 控制图标的样式
                    // background 背景色(要又透明)
                    const loading = this.$loading({lock: true, text: '登录中...', spinner: 'el-icon-loading',  background: 'rgba(0, 0, 0, 0.7)'})

                    // js:setTimeout，间隔多少毫秒就执行1次 setTimeout(function() {})
                    // vue里面，如果要在函数里面写this，要用箭头函数，否则这个this就变成window对象了
                    setTimeout(() => {
                        loading.close()
                        axios.post("/login",{'qqid':this.qqid, 'pwd':this.pwd}).then(resp=>{
                            // 直接先到页面哪里去
                            resp.data.code == '200' ? window.location.href="/list4vue.html" :  ELEMENT.MessageBox.confirm(resp.data.msg,this.mconfig )
                        })
                    }, 1000)
                } else ELEMENT.MessageBox.confirm('用户名或密码不能为空！',this.mconfig)
            }
        }
    });

</script>

</body>

</html>